	<template>
		<view class="u-p-t-40 u-p-r-60 u-p-l-60 u-p-b-30 logincontainer">
			<!-- mode参数指定头像的类型，取值circle为圆形，取值square为圆角方形 -->
			<u-avatar size="140" src="/static/pic/user.png" mode="circle"></u-avatar>

			<u-form class="forms" :model="loginModel" ref="form1">
				<!-- :model="loginModel"：绑定表单数据模型，loginModel是一个响应式对象，包含account和password两个字段 -->

				<u-form-item left-icon="account-fill" left-icon-style="font-size:24px;color:#ff7670"><u-input
						placeholder="请输入账号" v-model="loginModel.account" /></u-form-item>
				<u-form-item left-icon="lock-fill" left-icon-style="font-size:24px;color:#ff7670"><u-input
						placeholder="请输入密码" v-model="loginModel.password" /></u-form-item>
				<view class="passtext" @click="gotoRegister">
					没有账号，去注册
				</view>

				<u-button :custom-style="customStyle1" @click="GoToLogin">登录</u-button>
				<!-- 		<u-button type="success" :custom-style="customStyle2" @click="GoToRegisterAuth">实名认证</u-button> -->

			</u-form>

		</view>

	</template>

	<script setup>
		import {
			reactive
		} from 'vue';
		import {
			login
		} from "../../api/user.js"

		const loginModel = reactive({
			account: '',
			password: '',
			userId: 0,
			nickname: '',
			avatar: ''
		})
		const customStyle1 = reactive({
			marginTop: '40px',
			backgroundColor: '#fd473a',
			color: '#fff'

		})
		const customStyle2 = reactive({
			marginTop: '25px',
			// backgroundColor: '#FFA500',
			color: '#fff'

		})
		// 跳转到登录页面
		const gotoRegister = () => {
			uni.navigateTo({
				url: '/pages/register/register',

			});
		}
		const GoToLogin = async () => {
			// loginModel.userId = uni.getStorageSync('userId');
			if (!loginModel.account || !loginModel.password) {
				uni.showToast({
					title: '请输入账号或密码',
					icon: 'none',
					duration: 2000,
				});
				return;
			}
			console.log("Login Input:", loginModel);


			let res = await login(loginModel)
			if (res.data.status == 0) {
				// status 为 0，跳转到认证页面
				uni.showToast({
					title: '请完成实名认证',
					icon: 'loading',
					duration: 2000,
				});
				uni.navigateTo({
					url: '/pages/register-auth/register-auth',
				});
			} else if (res.data.status == 1) {
				// status 为 1，登录成功，跳转到首页
				uni.setStorageSync('userId', res.data.userId);
				uni.setStorageSync('nickname', res.data.nickname);
				uni.setStorageSync('avatar', res.data.avatar);
				console.log("userId", res.data.userId)
				console.log("nickname", res.data.nickname)
				console.log("avatar", res.data.avatar)
				// 存储完整用户信息
				// uni.setStorageSync('userInfo', {
				// 	userId: res.data.userId,
				// 	nickname: res.data.nickname,
				// 	avatar: res.data.avatar,

				// });


				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 2000,
				});
				uni.switchTab({
					url: '/pages/index/index', // 跳转到首页
				});
			} else if (res.data.status == 2) {
				// status 为 2，账号被封禁，提示用户
				uni.showToast({
					title: '账号已被封禁',
					icon: 'none',
					duration: 2000,
				});
			} else {
				// 其他未知状态，提示用户
				uni.showToast({
					title: '未知状态，请联系管理员',
					icon: 'none',
					duration: 2000,
				});
			}

		}


		// const GoToRegisterAuth = () => {
		// 	uni.navigateTo({
		// 		// navigateTo方法用于跳转到非tabBar页面
		// 		url: '/pages/register-auth/register-auth', // 跳转认证页面的路径
		// 	});
		// };
	</script>

	<style lang="scss">
		.logincontainer {
			height: 100%;
			display: flex;
			align-items: center;
			// 设置Flexbox容器的主轴方向为垂直方向（列方向）,使子元素垂直排列
			flex-direction: column;


			.forms {
				width: 100%;
			}
		}

		.passtext {
			display: flex;
			// flex-end 使子元素在主轴的末端对齐
			justify-content: flex-end;
			color: #FFA500;
		}
	</style>